<template>
  <div style="height: 100%">
    <div class="all" style="height: 100%">
      <div v-for="(list, index) in CasualRecordList[0]" :key="index">
        <v-card
          class="mx-auto my-12"
          max-width="347"
          @mouseleave="mouseLeave(index)"
          @mouseenter="enter"
          ref="jo"
        >
          <template slot="progress"> </template>
          <v-img height="200" :src="list.ArticleUrl"></v-img>
          <!-- 随机标题 -->
          <v-card-title :style="{ color: titlecolor }">{{
            list.ArticleTitle
          }}</v-card-title>
          <!-- 随记时间 -->
          <v-row align="center" class="mx-0">
            <div class="grey--text ms-3" style="padding-left: 5px">
              {{ list.ArticleDate }}
            </div>
          </v-row>
          <!-- 随记导语 -->
          <v-card-text>
            <div style="color: #795548">{{ list.ArticleIntroduction }}</div>
          </v-card-text>
          <v-divider class="mx-4"></v-divider>
          <v-card-actions>
            <v-btn
              color="deep-purple lighten-2"
              text
              @click="list.reveal = true"
              style="font-size: 16px"
            >
              详细
            </v-btn>
          </v-card-actions>
          <v-expand-transition>
            <v-card
              v-if="CasualRecordList[0][index].reveal"
              class="transition-fast-in-fast-out v-card--reveal"
              style="height: 100%"
              :style="{ 'background-color': bgccolor }"
            >
              <div
                style="
                  width: 100%;
                  height: 100%;
                  overflow-x: auto;
                  overflow-y: auto;
                "
              >
                <v-card-text class="pb-0" style="height: 100%">
                  <div>
                    <!-- 随记详细标题 -->
                    <p
                      style="
                        padding: 20px 0 20px 0;
                        font-size: 36px;
                        font-weight: bolder;
                      "
                      :style="{ color: title1color }"
                    >
                      {{ list.ArticleTitle }}
                    </p>
                  </div>
                  <!-- 随记 详细内容-->
                  <div v-for="(i, index) in list.updateContext" :key="index">
                    <p>{{ i }}</p>
                  </div>
                </v-card-text>
              </div>
              <v-card-actions
                class="pt-0"
                style="position: relative; top: -40px"
              >
                <v-btn text color="teal accent-4" @click="list.reveal = false">
                  关闭
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-expand-transition>
        </v-card>
      </div>
    </div>
  </div>
</template>
<script>
import { request } from "../../network/request";
export default {
  name: "BlogCasualRecord",
  data() {
    return {
      selection: 1,
      colorlist: [
        "#E6E6FA",
        "#CFD8DC",
        "#A5D6A7",
        "#4CAF50",
        "#00B0FF",
        "#3F51B5",
        "#7E57C2",
        "#B388FF",
        "#3D5AFE",
        "#009688",
        "#00E5FF",
        "#69F0AE",
        "#FFCA28",
        "#6D4C41",
        "#FFB6C1",
        "#FFC0CB",
        "#DC143C",
        "#FFF0F5",
        "#DB7093",
        "#FF69B4",
        "#FF1493",
        "#C71585",
        "#DA70D6",
        "#0000FF",
        "#B0E0E6",
        "#008080",
        "#00FF7F",
        "#3CB371",
        "#00FF00",
        "#7CFC00",
        "#FFFFF0",
        "#F0E68C",
        "#FFFAF0",
        "#D2B48C",
        "#FAF0E6",
      ],
      titlecolor: "",
      bgccolor: "",
      title1color: "",
      title2color: "",
      // 随记列表
      CasualRecordList: [
        // {
        //   reveal: false,
        //   id: "1",
        //   title: "Bsea",
        //   date: "2021.7.4",
        //   introduction: "第一个随记",
        //   context: `2021.7.4 上帝不会给我第二条生命 万物早已苏醒 躺在一望无际的原野 早已梦回故里 三千里是梦见的原因 梦里有我的第二条生命 漂泊的日子慢慢过去 明日依旧有黎明 第二条生命就此死去 只剩下腐朽的身躯 每当黑夜来临 腐朽便化为灰烬 我的生命便再次扎根于故里 ----大海`,
        //   updateContext: "",
        //   imgUrl: "https://cdn.vuetifyjs.com/images/cards/cooking.png",
        // },
      ],
    };
  },
  // computed:{
  //   color(){

  //   }
  // },
  created() {
    request({
      url: "/admin/getcasualrecordpage",
      method: "GET",
    })
      .then((res) => {
        this.CasualRecordList.push(eval(res.data.msg));
        var i = 0;
        var length = this.CasualRecordList[0].length;
        // console.log(this.CasualRecordList[0]);
        for (; i < length; i++) {
          var reveal = this.CasualRecordList[0][i]["reveal"];
          // var context = this.CasualRecordList[0][i]["ArticleContext"];
          this.CasualRecordList[0][i]["reveal"] = Boolean(reveal);
          // console.log(context);
          this.detail(i);
        }
        // console.log(this.CasualRecordList[0][0]);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    detail(i) {
      // this.CasualRecordList[id].reveal = true;
      var s = this.CasualRecordList[0][i].ArticleContext;
      // 在每个空格字符处进行分解。
      this.CasualRecordList[0][i].updateContext = s.split(" ");
      // console.log(this.CasualRecordList[0][i].updateContext);
      // return;
    },
    mouseLeave(index) {
      this.CasualRecordList[0][index].reveal = false;
    },
    enter() {
      var color1 = this.colorlist;
      var color2 = this.colorlist;
      var color3 = this.colorlist;
      var color4 = this.colorlist;
      var i = Math.floor(Math.random() * color1.length);
      var j = Math.floor(Math.random() * color2.length);
      var k = Math.floor(Math.random() * color3.length);
      var m = Math.floor(Math.random() * color4.length);
      this.bgccolor = color1[i];
      this.titlecolor = color2[j];
      this.title1color = color3[k];
      this.title2color = color4[m];
    },
  },
};
</script>
<style lang="scss" scoped>
.all {
  display: flex;
  height: 100%;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-around;
}
.v-card--reveal {
  bottom: 0;
  opacity: 1 !important;
  position: absolute;
  width: 100%;
}
</style>
